<template>
  <div>
    <div class="sale-info">
      <table>
        <!-- 标题 end-->
        <tr class="sale-info-title">
          <td>跟进人</td>
          <td>跟进方式</td>
          <td>跟进内容</td>
          <td>跟进时间</td>
        </tr>
        <!-- 标题 end-->
        <!-- 列表循环 -->
        <tr v-for="(item,idnex) in allList">
          <td>{{item.user.name}}</td>
          <td>{{item.mode}}</td>
          <td>{{item.content}}</td>
          <td>{{item.create_time}}</td>
        </tr>
        <!-- 列表循环 end-->
      </table>
      <!-- 分页 -->
      <div class="page-list" v-show="pageShows">
        <el-pagination
          @current-change="currentChange"
          layout="prev, pager, next" :current-page="datas.current_page" :page-size="datas.per_page"
          :total="datas.total">
        </el-pagination>
      </div>
      <!-- 分页 end-->
    </div>
    <!-- 楼盘列表 end-->
    <!--提示弹框-->
    <div v-show="submitShow">
      <Modal :ModalClose="Closesubmit" :message="message" :pushTo="pushTo"></Modal>
    </div>
  </div>
</template>
<script type="text/babel">
  import heads from './head';
  import footers from './footer';
  import Modal from './modal.vue';
  export default {
    name: 'Hfollow',
    components: {
      heads,
      footers,
      Modal
    },
    data() {
      return {
        pageShows:false,
        submitShow:false,
        message: '',
        pushTo: '',
        allList:[],
        quyuListL:[],//区域列表
        mendianListL:[],//门店列表
        yuangongList:[],//员工列表
        upList:[],//跟进放上来列表
        datas:[],
        formData:{
          page:1,
          group_id:'',//小组id
        },
      }
    },
    methods:{
      // 打开提示弹窗
      // opensunmit(){
      //   this.message = this.$store.state.messageString;
      //   this.submitShow = true
      // },
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false
      },
      // 分页
      currentChange(val){
        let that = this;
        that.formData.page = val;
        that.$http.get('/index/house_up',{
          params:that.formData
        }).then(res => {
          that.allList = res.data.data;
          that.datas = res.data;
          console.log(that.formData.page + '-----' + val)
        }).catch(err => {
          console.log(err)
        })
      },
      //列表
      setHouseUp(){
        let that = this;
        that.$http.get('/index/house_up',{
          params: this.formData
        }
        ).then(res=>{
          that.allList = res.data.data;
          that.datas = res.data;
          if(res.data.total > res.data.per_page){
            that.pageShows = true
          }else {
            that.pageShows = false
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      //获取区域
      setQuyu(){
        let that = this;
        that.$http.get('/index/department',{
          params:{
            id:0
          }
        }).then(res=>{
          // console.log(res.data);
          that.quyuListL = res.data
        }).catch(err=>{
          console.log(err)
        })
      },
      //获取门店列表
      setMenD(id){
        let that = this;
        that.$http.get('/index/department',{
          params:{
            id:id
          }
        }).then(res=>{
          // console.log(res.data);
          that.mendianListL = res.data
        }).catch(err=>{
          console.log(err)
        })
      },
      //获取小组
      setXiaoZ(id){
        let that = this;
        that.$http.get('/index/department/staff_store/' + id,{
        }).then(res=>{
          // console.log(res.data);
          that.yuangongList = res.data
        }).catch(err=>{
          console.log(err)
        })
      },
      //获取跟进方式列表
      setUpL(){
        let that = this;
        that.$http.get('/index/house_up/mode',{})
          .then(res=>{
            that.upList = res.data;
            // console.log(res.data)
          }).catch(err=>{
            console.log(err)
        })
      }
    },
    created(){
      let that = this;
      that.setQuyu();
      that.setUpL();
      that.setHouseUp();
    }
  }
</script>

<style scoped>
  .sale-info {
    width: 100%;
    float: left;
    position: fixed;
    top: 181px;
    height: calc(100% - 214px);
    overflow-y: auto;
  }
  table {
    width: 100%;
  }
  table td {
    line-height: 30px;
    height: 30px;
    border: 1px solid #d3d3d3;
  }

  .page-list {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 70px;
  }
  /*}*/
.sale-list-li-input select{
  width: 90%;
  float: left;
  height: 30px;
  line-height: 30px;
  background: #fff;
  border: 1px solid #a0a0a0;
}

  .sale-list-li-inputz input {
    width: 40% !important;
    float: left;
  }
  .sale-list-li-inputz input:nth-child(2) {
    margin-left: 8%
  }
  .sale-info-title {
    background-color: #1590ed;
    width: 100%;
    overflow: hidden;
    font-weight:bold;
  }
  tr:nth-child(n+2):hover{
    background: #f9f9f9
  }
  .sale-list-li-input input {
    width: 84%;
    float: left;
    height: 27px;
    line-height: 30px;
    padding-left: 10px;
    background: #fff;
    border: 1px solid #a0a0a0;
  }
  .sale-btn button {
    margin-right: 40px;
    font-size: 1.1em;
    padding: 5px 10px;
    border-radius: 5px;
    background: #ed7d31;
    color: #fff;
    border: none;
  }
</style>
